import React from 'react'
import { NavLink } from 'react-router-dom'
// ===================================================================== antd
import Router from '@views/router'
// ===================================================================== image
import Logo from '@img/frame/logo.png'
// ===================================================================== global declare
const { $http, $fn, $async } = window
// ===================================================================== antd
const message = import('@antd/message')
const confirm = import('@antd/confirm')
// ===================================================================== private template
// const Router = $async(()=>import('@views/router'))
const Page = $async(()=>import('@tp/content'))
// ===================================================================== global template
const Image = $async(()=>import('@tp/image'))
const Text = $async(()=>import('@tp/text'))
// ===================================================================== private component
const height = 44
// ===================================================================== image
const LiComponent = ({ title, onClick }) => (
	<li className='fxmc cp' style={{width:height}} onClick={onClick}>
		<div>
			<i></i><span>{title}</span>
		</div>
	</li>
)
// ===================================================================== component
export default class extends React.Component{
	state = {
		user: $fn.getUser()
	}
	componentDidMount(){
		
	}
	render(){
		const { user } = this.state
		return (
			<Page className='fv'>
				<header className='fxmc bcm cf' style={{height:40}}>
					<h2 className='fxmc bcm h cp hover-o plr10' style={{width:$fn.menuWidth}} onClick={()=>$fn.push(this,'/')}>
						<Image width={30} src={Logo}/>
					</h2>
					<nav className='ex fx h f14 fxm menu-list'>
						<NavLink to='/main/check-user-info'>检验用户信息</NavLink>
						<NavLink to='/main/project-list'>项目清单</NavLink>
						<NavLink to='/main/check-project'>检测项目</NavLink>
						<NavLink to='/main/report'>报告单</NavLink>
					</nav>
					<div className='fxm mr10'>
						{/* 头像 */}
						<Image wrap round size={40} src={user.head_portrait} className='bor1'/>
						<dl className='ml10 fxm'>
							<dt className='nowrap b f13'><Text value={user.real_name} color='#fff'/></dt>
							{/* 职位 */}
							<dd className='r100px bcm plr5 lh18 nowrap' style={{opacity:'.8'}}><Text color='#fff' value={user.position} /></dd>
						</dl>
					</div>
					<div style={{height:25, width:1, opacity:.3}} className='bcf mlr10'></div>
					<ul className='h fx'>
						<LiComponent title='退出' onClick={()=>{
							confirm.then(f=>{
								f.default({
									msg:'确认退出登录？',
									onOk: close => {
										$http.pull(null,'user/logout',{ loadingText:'退出登录中...' }).then(data=>{
											close()
											$fn.remove()
											message.then(f=>f.default.success('退出登录成功'))
											$fn.replace(this,'/login')
										})
									}
								})
							})
						}} />
					</ul>
				</header>
				<div className='rel ex'>
					<Router {...this.props}/>
				</div>
			</Page>
		)
	}
}